<template>
<div class="article-edit">
  <div class="title">
    <span>标题：</span>
    <el-input style="flex: 1; margin: 0 4px" size="small" v-model="title"></el-input>
    <el-upload
      class="file-upload"
      ref="upload" 
      action=""
      :show-file-list="false"
      :http-request="fileUploadFn" 
    >  
      <el-button slot="trigger" type="primary" size="mini" icon="el-icon-upload"></el-button> 
    </el-upload>
    
  </div>
  <div style="margin-bottom: 5px;">  
    <el-tag size="small" v-for="(item, index) in attachments" :key="`att_${index}`" closable @close="delAttachClick(item)">
      {{item.split('@')[0]}}
    </el-tag>
  </div>
  <el-input
    class="content-input"
    type="textarea"
    placeholder="请输入内容"
    v-model="content"
    resize="none"
    :rows="3"
    maxlength="200"
    show-word-limit
  >
  </el-input>
  <div class="tools-warp">
    <div class="tag-warp">
      <el-button type="primary" size="mini" style="margin-right:3px" @click="openTagSelHandle">添加标签</el-button>
      <el-tag style="margin:2px" size="small" v-for="(item, index) in tags" :key="`tag_${index}`" closable @close="delTagClick(item, index)">
      {{item.label}}
    </el-tag>
    </div>
    <div class="confirm-warp">
      <el-button type="primary" size="small" @click="confirmClickHandle">保存</el-button>
    </div>
  </div>

  <my-dialog :visible.sync="tagEditVisible" target="body" title="标签添加" width="400px" height="380px"  :footer="false">
    <tag-edit ref="tagEdit" @on-tagSelected="tagSelectedHandle"></tag-edit>
  </my-dialog>
</div>
</template>
<style lang="scss" scoped>
// @import "~$ui/styles/mixins/_index.scss";
.article-edit{
  .title{
    display: flex;
    flex-flow: row nowrap;
    padding-bottom: 5px;
    align-items: center;
  }
  .tools-warp{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: 5px;
    .tag-warp{
      flex: 1;
      display: flex; 
      width: 0;
      align-items: top;
    } 
  }
}
</style> 
<script> 
import {normalUpload} from '@/helper/updownload'
import {FILE_UPLOAD} from '$my/code/api/file'
import {SERVER_HOST} from '@/constant' 
import TagEdit from '@/components/article/tag-edit'
export default {
  mixins: [],
  components: {
    TagEdit
  },
  props: {
  },
  data() {  
    return {
      serverHost: SERVER_HOST,
      title: '',
      content: '',
      tags: [],
      attachments: [],
      tagEditVisible: false
    }
  },
  computed: {
  },
  methods: {
    fileUploadFn(target) {  
      normalUpload(target.file, FILE_UPLOAD).then((res) => {
        this.attachments.push(res.id)
      })
    },
    delAttachClick(attach) { 
      const targetIndex = this.attachments.findIndex((item) => {
        return item === attach
      })
      this.attachments.splice(targetIndex, 1)
    },
    confirmClickHandle() {
      this.$emit('on-articleConfirm', this.getArticleData())
    },
    getArticleData() {
      return {
        title: this.title,
        content: this.content,
        tags: this.tags.map((item) => { return item.id }),
        attachments: this.attachments
      }
    },
    openTagSelHandle() {
      this.tagEditVisible = true
      this.$nextTick(() => {
        this.$refs.tagEdit.setSelectTags(this.tags.map((item) => { return item.id }))
      })
    },
    tagSelectedHandle(tags) { 
      this.tags = tags
      this.tagEditVisible = false
    },
    delTagClick(tag, index) {
      this.tags.splice(index, 1)
    },
    resetForm() {
      this.title = ''
      this.content = ''
      this.tags = []
      this.attachments = []
    }
  },
  created() {},
  mounted() {}
}
</script>
